What to use... ScriptTag or update product.liquid value?

[Tiago_Sousa]

Hello everyone!

I want to add a button after the "ADD TO BAG" button in every product.

I already did this by extracting the product.liquid value (which is the product template) and update it with the new button code. This happens upon app installation for every template already installed in a shop.

My doubt is, should I use the scriptTag to add the button or should I continue doing this way? I dont know If i understood clearly how the scriptTag works but I guess that, for what I understood, the script is loaded every time the user loads the store page... this should make the store page loading much more slow right?

What do you guys think?

[James_MacAulay]

Please use Script Tags for this! It's exactly the kind of thing that Script Tags were designed to do. If you keep your script to a reasonable size, the effects on load time for the page should be imperceptible.

Injecting HTML into theme templates is a bad thing to do for a number of reasons, for example:

• When a merchant changes their shop's theme, they'll lose your button (Script Tags remain constant between theme changes)
• When you want to update your button code, you'll have to update every shop that's installed your app (with a Script Tag, you just update the source script)
• When a merchant uninstalls your app, your button will remain and they won't know how to get rid of it (an app's Script Tags are removed when an app is uninstalled)

So, please avoid theme template updates in favour of Script Tags whenever possible.

[Tiago_Sousa]

Thanks for your reply!

So... I just have to add a scriptTag where that script searches for the element "ADD TO BAG" button to insert the button I want after? Did I got this right?

[James_MacAulay]

Yeah, that's right. The difference is just that you are writing client-side code which queries and updates the DOM instead of server-side code which parses and updates HTML/Liquid templates.

[Tiago_Sousa]

I have been trying to use scriptTag and when I update product.liquid template with my script just before my div and all data-fields of the product are gathered as you can see:

<div id="followprice-widget" data-store-key="asdpoyf9898fh33f90qwdk" data-product-title="World's Best Unicorn" data-product-id="" data-product-url="http://followprice-shopify.myshopify.com/products/worlds-best-unicorn"; data-product-image="//cdn.shopify.com/s/files/1/0597/1557/products/p5294_column_grid_12.jpg?v=1407787062" data-product-price="900000" data-product-currency="EUR" data-product-sku="" data-product-barcode="" data-product-campaign-discount="" data-product-campaign-start="" data-product-campaign-end="" data-product-availability="1" data-product-stock="" data-product-manufacture="Followprice" data-product-category="" data-product-subcategory="" data-product-tags="[&quot;Unicorns&quot;]" data-product-internal-title="World's Best Unicorn" style="width: 0px; height: 0px; padding: 0px; z-index: 50; position: relative;"></div>

 But when i try to use scriptTag, I append the same script and the same div in the HTML but all fields are empty like so:

<div data-store-key="asdpoyf9898fh33f90qwdk" data-product-title="{{ product.title | escape}}" data-product-id="{{ product.product_id | escape}}" data-product-url="{{shop.url | url_param_escape }}{{ product.url | url_escape}}" data-product-image="{{ product.featured_image | product_img_url: 'master' | url_param_escape }}" data-product-price="{{ product.price | escape}}" data-product-currency="{{ shop.currency | escape}}" data-product-sku="{{ product.sku | escape}}" data-product-barcode="{{ product.barcode | escape}}" data-product-campaign-discount="" data-product-campaign-start="" data-product-campaign-end="" data-product-availability="1" data-product-stock="{{ product.inventory_quantity | escape}}" data-product-manufacture="{{ product.vendor | escape}}" data-product-category="{{ product.product_type | escape}}" data-product-subcategory="" data-product-tags="{{ product.tags | escape}}" data-product-internal-title="{{ product.title | escape}}"> </div>

Any ideas?

Thanks for the help so far!

[James_MacAulay]

I can't really tell what you're doing without seeing the JavaScript you're referencing in the Script Tag. Can you provide a link to the script?

[Tiago_Sousa]

Ok,

This is the link to the script tag: http://www.atualbussola.com/wp-content/uploads/2014/08/scriptasdf.js