Jump to content

Adding Go To Cart button under Add to Cart in 7.1

Recommended Posts

I was trying to add a "Go To Cart" button below the default "Add To Cart" button. I was able to inject another element with jquery like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(function() {
     $("<a class='btn btn--border theme-btn--primary-inverse' href='/cart/'>Go to Cart</a>").insertAfter(".sqs-add-to-cart-button-wrapper");
   });
</script>

But of course it doesn't get all the button styling. So I tried to add div parents to match other buttons on the site that look like this:

<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1590159860790_33264">
	<div class="sqs-block-content" id="yui_3_17_2_1_1591844141919_110">
		<div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" id="yui_3_17_2_1_1591844141919_109">
			<a href="/cart" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Go To Cart</a>
		</div>
	</div>
</div>

However, when I was nesting the "a" element, all the divs and the element within disappear. This was because I was not consistent using ' and " to define my strings. The following code works for me.
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(function() {
     $('<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="large"><a class="sqs-block-button-element--large sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper');        
   });
</script>



Would still be interested in the best place for documentation for 7.1 site wide css styles. I guess everyone just rips it from what gets served on their site?

Thank you,
-Dean

Fix for order swapping in mobile

If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button. There's probably a better way to query for this and insert it, but it doesn't seem to change much.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(function() {
     $('<div class="sqs-block button-block sqs-block-button" style="-webkit-box-ordinal-group:4; -moz-box-ordinal-group:4; -ms-flex-order:4; -webkit-order:4; order:4;"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" style="margin: 0 auto !important; width: 70% !important"><a class="sqs-block-button-element--medium sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper');        
   });
</script>

 

Link to comment
  • Replies 4
  • Created
  • Last Reply
  • 2 months later...
On 6/11/2020 at 11:34 AM, dklear said:

I was trying to add a "Go To Cart" button below the default "Add To Cart" button. I was able to inject another element with jquery like this:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(function() {
     $("<a class='btn btn--border theme-btn--primary-inverse' href='/cart/'>Go to Cart</a>").insertAfter(".sqs-add-to-cart-button-wrapper");
   });
</script>

But of course it doesn't get all the button styling. So I tried to add div parents to match other buttons on the site that look like this:


<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1590159860790_33264">
	<div class="sqs-block-content" id="yui_3_17_2_1_1591844141919_110">
		<div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" id="yui_3_17_2_1_1591844141919_109">
			<a href="/cart" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Go To Cart</a>
		</div>
	</div>
</div>

However, when I was nesting the "a" element, all the divs and the element within disappear. This was because I was not consistent using ' and " to define my strings. The following code works for me.
 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(function() {
     $('<div class="sqs-block button-block sqs-block-button"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="large"><a class="sqs-block-button-element--large sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper');        
   });
</script>



Would still be interested in the best place for documentation for 7.1 site wide css styles. I guess everyone just rips it from what gets served on their site?

Thank you,
-Dean

Fix for order swapping in mobile

If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button. There's probably a better way to query for this and insert it, but it doesn't seem to change much.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   $(function() {
     $('<div class="sqs-block button-block sqs-block-button" style="-webkit-box-ordinal-group:4; -moz-box-ordinal-group:4; -ms-flex-order:4; -webkit-order:4; order:4;"><div class="sqs-block-content"><div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" style="margin: 0 auto !important; width: 70% !important"><a class="sqs-block-button-element--medium sqs-block-button-element" style="box-sizing: border-box !important; width: 100% !important" href="/cart/">Go to Cart</a></div></div></div>').insertAfter('.sqs-add-to-cart-button-wrapper');        
   });
</script>

 

Hi Dean, thank you for this. It worked on 7.1 . Only issue is that the Go to Cart is above the Add to Cart in mobile view. I did not understand your comment "If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button." Could you pls help on what needs to be done to correct this?

Link to comment
On 8/13/2020 at 7:49 AM, midwicket said:

Hi Dean, thank you for this. It worked on 7.1 . Only issue is that the Go to Cart is above the Add to Cart in mobile view. I did not understand your comment "If things are swapping around in your mobile view, you have to add the same order as the "Add to cart" button." Could you pls help on what needs to be done to correct this?

Can you share link to product? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.