Adding an HTML Element to a Database

Ask the community
,
1

So I originally, before the Wixcode just came out, had to make a separate product page for each Shopify product I wanted to make with a shopify buy button on wix. This made my website slower than healthy because I ended up with more than a hundred pages.

Now that the wixcode came out, I have been experimenting with it and thought it was the answer to my prayers. However, I cannot make a separate HTML code for each individual page now using a database. In order to do that, I would have to be able to add an HTML element as part of the database. Then I could put each Shopify Buy Button under each product.

But I currently cannot find an option for that.

Can anyone help me find a solution for this? Or tell me how to add an HTML element option to the wixcode database? I need individual separate HTML elements for each page under my database. These codes are what allow me to sync my dropshipping products to a wix page.

Please and thanks!

2

Hi,

You can set the HTML component using code.
See here how.

Liran.

3

Hello Liran,

I don’t know code. If I can figure this out, will this allow me to add an HTML component to the wixcode database? I need a different HTML code for each page created in the database. Just like the images are different for each page in the database, I need a different HTML buy button for each page.

Thank you!

Ciaproductionz

4

Hi,

This will require a bit of coding, but yes.
Basically, you’ll save the HTML code to the database, and when a page is loaded, you’ll read it from the database and use HTML components postMessage to send it to the component.
In the previous link I provided you, there’s a guide on how to change a label in an HTML component using the postMessage method. What you need is close to this, so I suggest starting there.

Liran.

5

Hello Liran,

I don’t know any code and I was reading the page you sent me. But I am really sorry to say I don’t understand at all. I can’t figure out how this will help me to make html in dataset collections to use on dynamic pages. I am new to these terms so I am not sure if I explained properly.

I am trying to use the Wixcode Dataset to make complete product pages with a dynamic page. In order to do this, I need to add an HTML component to the dataset, which does not allow me to attach a rich text component in the dataset to a HTML box on the page. I cannot create html for each individual page using the dataset and a dynamic page. Is there an easy way to get around this without using java script or html?

So, in short, I know that I can set images, text, titles, and URLs in the dataset, but I really need to also set a HTML iframe in each page as well. If I could figure out how to connect a dataset to an HTML iframe, I would be all set since I could put the HTML code in the rich text box and then connect it the same way you connect the images in your dataset to an element on a dynamic page.

Please help!

Sincerely, Coral

6

What Liran wrote is correct to the point of my experience that the html-component has limitations to what it can achieve. Can you post 2 samples of html you would like to show (so we can see where they differ) and we can look at it and help you out?

7

Hello Giri,

Thank you for the help!

I just need a different HTML component for each product page on the dataset. I use the shopify buy button and dropship. Because I dropship, I cannot just export my items to the wix site and use their eccommerce shop even though I want to. And, I hate shopify’s customization so I can’t just use their service. So, I have to use HTML buy buttons from Shopify on my Wix website.

Each HTML component is a different buy button, which is why I need to add HTML to the dataset so that on the dynamic page the buy button changes with each product. I am trying to explain it, but it is a bit complicated.

This is one of my buy buttons:

/*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } 
  function loadScript() { 
    var script = document.createElement('script'); 
    script.async = true; 
    script.src = scriptURL; 
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); 
    script.onload = ShopifyBuyInit; 
  } 

  function ShopifyBuyInit() { 
    var client = ShopifyBuy.buildClient({ 
      domain: 'peace-wolf.myshopify.com', 
      apiKey: '4778eed9ca9ff3bfe8c46191cb44f349', 
      appId: '6', 
    }); 

    ShopifyBuy.UI.onReady(client).then(function (ui) { 
      ui.createComponent('product', { 
        id: [10252657417], 
        node: document.getElementById('product-component-1514498910109'), 
        moneyFormat: '${{amount}}', 
        options: {"product":{"variantId":"all","width":"240px","contents":{"img":false,"imgWithCarousel":false,"title":false,"variantTitle":false,"price":false,"description":false,"buttonWithQuantity":false,"quantity":false},"styles":{"product":{"@media (min-width: 601px)":{"max-width":"calc(25% - 20px)","margin-left":"20px","margin-bottom":"50px"}},"button":{"background-color":"#486c74","font-family":"Playfair Display, serif","font-size":"17px","padding-top":"16.5px","padding-bottom":"16.5px","padding-left":"50px","padding-right":"50px",":hover":{"background-color":"#416168"},"border-radius":"100px",":focus":{"background-color":"#416168"},"font-weight":"bold"},"variantTitle":{"font-family":"Playfair Display, serif","font-weight":"normal"},"title":{"font-family":"Playfair Display, serif"},"description":{"font-family":"Playfair Display, serif","font-weight":"normal"},"price":{"font-family":"Playfair Display, serif","font-weight":"normal"},"quantityInput":{"font-size":"17px","padding-top":"16.5px","padding-bottom":"16.5px"},"compareAt":{"font-family":"Playfair Display, serif","font-weight":"normal"}},"googleFonts":["Playfair Display","Playfair Display","Playfair Display","Playfair Display","Playfair Display","Playfair Display"]},"cart":{"contents":{"button":true},"styles":{"button":{"background-color":"#486c74","font-family":"Playfair Display, serif","font-size":"17px","padding-top":"16.5px","padding-bottom":"16.5px",":hover":{"background-color":"#416168"},"border-radius":"100px",":focus":{"background-color":"#416168"},"font-weight":"bold"},"footer":{"background-color":"#ffffff"}},"googleFonts":["Playfair Display"]},"modalProduct":{"contents":{"img":false,"imgWithCarousel":true,"variantTitle":false,"buttonWithQuantity":true,"button":false,"quantity":false},"styles":{"product":{"@media (min-width: 601px)":{"max-width":"100%","margin-left":"0px","margin-bottom":"0px"}},"button":{"background-color":"#486c74","font-family":"Playfair Display, serif","font-size":"17px","padding-top":"16.5px","padding-bottom":"16.5px","padding-left":"50px","padding-right":"50px",":hover":{"background-color":"#416168"},"border-radius":"100px",":focus":{"background-color":"#416168"},"font-weight":"bold"},"variantTitle":{"font-family":"Playfair Display, serif","font-weight":"normal"},"title":{"font-family":"Playfair Display, serif"},"description":{"font-family":"Playfair Display, serif","font-weight":"normal"},"price":{"font-family":"Playfair Display, serif","font-weight":"normal"},"quantityInput":{"font-size":"17px","padding-top":"16.5px","padding-bottom":"16.5px"},"compareAt":{"font-family":"Playfair Display, serif","font-weight":"normal"}},"googleFonts":["Playfair Display","Playfair Display","Playfair Display","Playfair Display","Playfair Display","Playfair Display"]},"toggle":{"styles":{"toggle":{"font-family":"Playfair Display, serif","background-color":"#486c74",":hover":{"background-color":"#416168"},":focus":{"background-color":"#416168"},"font-weight":"bold"},"count":{"font-size":"17px"}},"googleFonts":["Playfair Display"]},"option":{"styles":{"label":{"font-family":"Playfair Display, serif"},"select":{"font-family":"Playfair Display, serif"}},"googleFonts":["Playfair Display","Playfair Display"]},"productSet":{"styles":{"products":{"@media (min-width: 601px)":{"margin-left":"-20px"}}}}}, 
      }); 
    }); 
  } 
})(); 
/*]]>*/ 
</script>

You can see that if I make a dataset with a dynamic page and I use it for product pages, I have to have a different buy button on each page as well. But, I cannot find a way to add html to the dataset. This would be a lot easier if I were able to connect a rich text element from the dataset to the HTML iframe component.

Is there any way to get around this without code? I have been researching for about a couple of hours but unfortunately I don’t understand. I was even looking at Shopify’s buy button API to see if that made it easier but its for advanced coding.

Thank you immensely!

Sincerely, Coral

8

Hi Coral,

Unfortunately, there’s no way around this without code. You can submit a feature request here .
If you do decide to try using HTML component and code, we’ll be happy to help.

Liran.

9

Hello Liran,

Thank you very much for trying. I struggled with code for a few days and then almost cried and ate some ice cream. Art, books, and music are my forte. Not code.

But no worries!!! I figured out a way around the code to use the buy button and still combine it with the wix premium gallery, with the heart counter, by playing around with placement so that the cart didn’t interfere with it. By putting product descriptions in the gallery photo descriptions, I have room to place at least four products on a page without making separate product pages, which was making my website move like a B-rated zombie. And, it looks REALLY great.

But if they ever add a html input to the dataset, I will be ecstatic.

Happy New Year!

Sincerely, Coral

10

Hi Giri Zano

I have a HTML code as
#1

#2

as you could see in above two html codes that they differ only at data-identifier. and i want to connect this text inside the data identifier component with my database with field named as Name. Please tell me. I need your help.

11

@ggolupta I have tried your html. What ir gives me in both cases is this:


Is this what you want to show? And is your question: how do I change the html per person, only changing:
data-identifier=“xxxxxxxx” ?

If so, as has been said before, you need to do some coding. You cannot copy-and-paste your way out of this, unfortunately. But we can get you close. Just explain what you need.

12

@giri-zano yes the html looks exactly like this. but the number of likes and dislikes in the html is decided by its data-identifier. So i will need a unique data identifier for each person. I am ready to code. But i don’t know much about coding so i need your help.

Let me go in detail. Let say i have a dynamic page containing text box with id = #text1 and the html element with id = #html1. The text box is connected to some field called #Name in my database called #Celebrities. Now I want my data identifier in my html element as posted above to be connected to the text box with id #text1. So that whatever value comes in my textbox from the database when the dynamic page loads is copied to the data-identifier in html element.

13

@ggolupta OK, I am going to help you to code. I am not doing the coding for you, but I will give you lots of examples and tips, with which you should be able to piece it together 100%. This way, you start learning.

  1. the attack plan: since the html is identical except for the name, we are going hard code this html as a string inside your page code. We replace one instance (e.g. data-identifier=“Pepper Pots” ) with this data-identifier=“{Name}”. Per dynamic page (holding the Name in the text field), we are going to replace that {Name} with the real name and then we are going to send this html to the html-component
    2)to put the whole string into code without too much trouble, put it inside backticks (`). That way, it will be identified by Javascript as a string also and wont interfere with the double quotes (") already present, also identifying strings in JS
    3)per item (Person) on the dynamic page, you retrieve the value of the text box (=the name) and you are going to use .replace to replace the {Name} with this string, studying this: JavaScript String replace() Method
    4)study my example of sending Google Spreadsheet data to the html-component safely. You can use the code almost without changing, because it doesn´t really matter what kind of string you send to it. Look here: https://girizano.wixsite.com/codecorner/home/html-component-not-running-in-publish-mode-google-sheets-example
    5)put you back into it. Try, try, try again, read w3s, look up stuff on StackOverflow. If you have tried everything and you cannot work out a problem, you come back here, show a piece of the code where it goes wrong, and we will help you.
  2. remember, console.log is your friend. Use it to see which var holds which value, to check program flow, etc.

Good luck.

14

Coral,
I am trying to use an HTML component and code. I have different HTMLs element that I want to load on the relevant dynamic pages. Is there some sample code I can start with.

I’m guessing that it will start with the postMessage referenced above. Thanks!

15

Hey @ciaproductionz ,
Did they add the html input to the dataset, Have followed your thread and I really need it.