Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding Go To Cart button under Add to Cart in 7.1


dklear
Go to solution Solved by dklear,

Question

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>

 

Edited by dklear
Solved issue - another fix
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0
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 post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
On 8/17/2020 at 5:47 PM, tuanphan said:

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

Thanks Tuanphan, this is solved. I figured out that this is the ordering 1,2,3,4 of the various items in the first section of product (below title) and was able to get it done.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...