Adding Go To Cart button under Add to Cart in 7.1

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>

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?

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.

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.