Liquid, JavaScript, themes, sales channels
I am trying to assign a link to each of the different bundles. I have 3 bundles. I am not sure how to get each generated bundle to have its own link.
{% assign product = all_products['spotify-playlist-premium'] %}
<div class="packdiscount" id="bundlelist">
<div class="enclose">
<h2>Choose your package and start growing your fanbase now!'</h2>
<ul class="packcss">
{% assign count = 0 %}
{% for block in section.blocks %}
{% assign count = count | plus: 1 %}
{% assign ppp = forloop.index | minus: 1 %}
<li class="{{product.metafields.classmid.classmid[ppp]}} acfv">
<div class="bestval"><img class="lazyload" src="{{ 'best-val.png' | asset_url }}"></div>
<figure><img class="lazyload" src="{{ block.settings.imagepr | img_url: '250x' }}"></figure>
<h3>{{ block.settings.namepr}}</h3>
<h6>Now Only</h6>
<div class="pp-price">${{ block.settings.price}}</div>
<p>{{ block.settings.eachprice}}</p>
<div class="contentst">
<ul>
{{ block.settings.content}}
</ul>
</div>
<div class="acart"><a data-fancybox="" data-src="#bundle{{count}}" href="javascript:;">Add To Cart <img class="lazyload" src="{{ 'add-cart.png' | asset_url }}"></a></div>
<div class="norisk">{{ settings.risktext }}</div>
</li>
{% endfor %}
</ul>
</div>
</div>
I imagine I have to change something in this line of code:
<div class="acart">
<a data-fancybox="" data-src="#bundle{{count}}" href="javascript:;">Add To Cart <img class="lazyload" src="{{ 'add-cart.png' | asset_url }}"></a>
</div>
Disregard the Javascript in the href field. I am trying to assign a link to each package. Currently, if I change the href field it affects all the bundles. For example, href="https://google.com" makes each bundle button go to google. How would I go about giving each bundle it's own link?
One thing I was considering was assigning links to variables. For example,
<script>
var Link1 = "https://google.com"
var Link2 = "https://youtube.com"
var Link3 = "https://reddit.com"
</script>
And then maybe I could call them like this:
<div class="acart"> <a data-fancybox="" data-src="#bundle{{count}}" href="Link{{count}}">Add To Cart <img class="lazyload" src="{{ 'add-cart.png' | asset_url }}"></a> </div>
Solved! Go to the solution
This is an accepted solution.
SOLVED:
I changed the HTML to this:
<div class="acart"><a id="bbundle{{count}}" href="">Add To Cart <img class="lazyload" src="{{ 'add-cart.png' | asset_url }}"></a></div>
And added the following javascript:
<script>
var Link1 = "https://google.com"
var Link2 = "https://youtube.com"
var Link3 = "https://reddit.com"
document.getElementById('bbundle1').href = Link1;
document.getElementById('bbundle2').href = Link2;
document.getElementById('bbundle3').href = Link3;
</script>
This worked for me. Now each bundle has it's own link.
This is an accepted solution.
SOLVED:
I changed the HTML to this:
<div class="acart"><a id="bbundle{{count}}" href="">Add To Cart <img class="lazyload" src="{{ 'add-cart.png' | asset_url }}"></a></div>
And added the following javascript:
<script>
var Link1 = "https://google.com"
var Link2 = "https://youtube.com"
var Link3 = "https://reddit.com"
document.getElementById('bbundle1').href = Link1;
document.getElementById('bbundle2').href = Link2;
document.getElementById('bbundle3').href = Link3;
</script>
This worked for me. Now each bundle has it's own link.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024