Change CTA button per a certain manufacturer

[BrianGNE]

Hello,

Currently, we have a button with a specific CTA that applies to all brands on our website.

What we would like to do is change what this CTA says along with the link destination but only for one specific brand. All others should remain how they are currently.

We are working with Razor and partials which makes this a little more complicated. 

I have the two buttons set up:

<div class="GNEPdpCTAButtonWrapper">

    <div>

        <div class="GNEPdpCTAButtonsB">

            <a class="btnPri" href="/dealerlocator@(brandParam)" target="_self">Where to Buy</a>

        </div>

    </div>

 

    <div>

        <div class="GNEPdpCTAButtonCEI">

            <a class="btnPri" href="https://www.ceisupply.com/" target="_blank">Buy Direct on CEISupply.com</a>

        </div>

    </div>

 

</div>

But targeting the brand and tying that to which button shows is a little beyond me. There are several areas within the code where "brandName" is present. Before I add more code to this ticket I wanted to know if I am posting the code properly so as not to overly annoy anyone. 

[{

                                'id': '@Model.Sku',

                                'name': '@Model.Name',

                                'price': '@Model.ProductPrice.PriceValue',

                                'brand': '@brandName',

                                'category': '@categoryName'

                            }]

Essentially I am looking for:

if brand = CEI show this and display none to the original button

I can provide more code information if someone is interested in helping me solve this. Thanks in advance for any assistance

[kendawson]

I'm assuming you already solved this issue by now? But, based on your question and your code, one possible solution might be something like this:

 

<div id="btn1">
	<div class="GNEPdpCTAButtonsB">
		<a id="dynlink" class="btnPri" href="/dealerlocator@(brandParam)" target="_self">Where to Buy</a>
	</div>
</div>
<div id="btn2">
	<div class="GNEPdpCTAButtonCEI">
		<a class="btnPri" href="https://www.ceisupply.com/" target="_blank">Buy Direct on CEISupply.com</a>
	</div>
</div>

<script>
// get the 2nd button DIV element and the dynamic anchor link (the one to change text on)
const btn2 = document.getElementById('btn2');
const dynlink = document.getElementById('dynlink');
// extract brand from existing object (or read in JSON data and get brand value)
const brand = object.brand;
// if the brand is 'CEI'
if (brand === 'CEI') 
{
	// hide the DIV which contains the second button 
	btn2.style.display = 'none';
	// change the text of the dynamic link to something different
	dynlink.innerText = 'Some New Link Text';
	// change the dynamic link URL
	dynlink.href = 'https://somenewlink.com';
}
</script>  

 

Edited February 2 by kendawson