Having Issues Setting A Different Link For Each Bundle

Solved
rrakos6
New Member
2 1 0

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&colon;;">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&colon;;">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>
Accepted Solution (1)

Accepted Solutions
rrakos6
New Member
2 1 0

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&colon;

<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. 

View solution in original post

Reply 1 (1)
rrakos6
New Member
2 1 0

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&colon;

<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. 

View solution in original post