Shopify Question posted in
The Shopify help center can be found here.

Wp add_shortcode attributes not changing the attributes value – Shopify

I have created a shortcode with attributes (with the help of google), but It does not changing the attributes value. I have googled this issue a lot but didn’t find solution.
Here is my code:

function infobox_shortcode( $atts ) {

    $array = shortcode_atts(
        array(
            'Background' => 'rgba(45, 90, 171, 0.1)',
            'Border' => 'rgba(45, 90, 171, 0.5)',
            'Color' => '#2561ea',
        ),
        $atts
    );
        return "<div class='note' style='background-color:{$array['Background']};border-color:{$array['Border']};color:{$array['Color']};'>
                <span class='note-icon'><i class='ti ti-info'></i></span>
                <span class='ml-2'>
                    Want to use this template in Shopify, WordPress or other platform?
                </span>
            </div>";

}
add_shortcode( 'InfoBox', 'infobox_shortcode' );

And I am calling it in my theme’s index.php page like this:

<?= do_shortcode('[InfoBox Background="red"]'); ?>

But it’s not changing the value of attribute Background, I don’t know where i am going wrong. It’ll be helpful If you people help me.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    It was my mistake, I was creating attributes with Capital letter like this

    'Background' => 'rgba(45, 90, 171, 0.1)',

    But it should be in small letters, and it worked now.

    'background' => 'rgba(45, 90, 171, 0.1)',

  2. 0

    attribute will be small letters.

    'background' => 'rgba(45, 90, 171, 0.1)',
'border' => 'rgba(45, 90, 171, 0.5)',
'color' => '#2561ea',
    Login or Signup to reply.
  3. 0 
    Here, some changes in code. Try this one, may this will give you solution or idea about your issue..

<?php
function infobox_shortcode( $atts ) {

$array = shortcode_atts(
    array(
        'background' => 'rgba(45, 90, 171, 0.1)',
        'border' => 'rgba(45, 90, 171, 0.5)',
        'color' => '#2561ea',
    ),$atts);
print_r($atts); // Remove, when you are fine with your atts! 
return 'Hello, World: '.$atts['background'];  //Remove, when you are fine with your expected output! 

$html = '<div class="note" style="background-color:{"'.$atts['background'].'"};border-color:{"'.$atts['border'].'"};color:{"'.$atts['color'].'"};"><span class="note-icon"><i class="ti ti-info"></i></span><span class="ml-2">Want to use this template in Shopify, WordPress or other platform?</span></div>';
return $html; 
}

add_shortcode( 'InfoBox', 'infobox_shortcode' );
?>
    Login or Signup to reply.
  4. 0

    This works for me great. 

    function infobox_shortcode($atts, $content = null)
{

    $a = shortcode_atts(array(
        'background' => 'rgba(45, 90, 171, 0.1)',
        'border' => 'rgba(45, 90, 171, 0.5)',
        'color' => '#2561ea',
    ), $atts);

    $content = ($content) ? $content : 'Want to use this template in Shopify, WordPress or other platform?';

    $output = '<div class="note" style="background-color: ' . $a['background'] . '; border: ' . $a['border'] . '; color: ' . $a['color'] . ';">';
    $output .= '<span class="note-icon"><i class="ti ti-info"></i></span>';
    $output .= '<span class="ml-2">';
    $output .= $content;
    $output .= '</span>';
    $output .= '</div>';

    return $output;

}

add_shortcode('InfoBox', 'infobox_shortcode');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search