Developing (v7+)

Controller Override for Custom View to Generate a Unique ID

Permalink November 09, 2017 at 3:53 PM

Hey all.

What is the secret to adding a controller.php to a block custom template? I have a Content block custom template that I want to do something that requires a controller.php but I can't seem to figure out the namespace. Here is my structure...

application/blocks/content/templates/buy-bulk/view.php

and I found this...

<?php
namespace Application\Block\Content;
class Controller extends \Concrete\Block\Content\Controller
{
    public function view()
    {
        $this->set('content', strtoupper($this->getContent()));
    }
}

but that changes all the content blocks.

Basically I need to add a Unique ID to a content block that is added to a page multiple times as a stack. Without the Unique ID, the blocks JS gets messed up. I intended to try this solution once I got the controller working...
https://www.concrete5.org/community/forums/customizing_c5/unique-blo...

If anyone knows a way to solve the unique ID issue without the need of a contoller.php file then I am all ears for that. Though the knowledge might be good for future reference.

Thanks in advance.
Chris

Gondwana replied on Nov 9, 2017 at 8:38 pm Permalink Reply

I'm not sure I fully understand the question (it seems to change a few times!).

Are you wanting to access the controller from your view.php? If so, I think $controller will get it.

As I understand it, all custom template view.php files use the same controller.php for their block type.

Are you wanting to change the block's controller.php, or are you wanting to leave that alone and just change the view.php?

Chrouglas replied on Nov 10, 2017 at 12:35 am Permalink Reply

Sorry. The end result is to have the ability to have two instances of the same stack (or just block i guess) on a single page and yet operate independently in terms of javascript functions. I normally use $bID to differentiate two instances of the same TYPE of block but since these are THE same block bID does not work. While looking at past forum post I think this is something that you yourself have come across. So I guess the real question of my post is 'how do you create a unique ID for a block custom template?'. If the answer has nothing to do with adding a controller.php file to a custom block template then nevermind that part :)

Gondwana replied on Nov 10, 2017 at 1:27 am Permalink Reply

Ta for clarification. If you are willing/able to change the block controller, that code will get you half way there. If not, i think u can adapt the code to work in view.php (i suspect i started off doing that).

If u need to get buid available to js u can get view.php to write some js to do so.

Chrouglas replied on Nov 10, 2017 at 1:30 am Permalink Reply

adapting the code for the view.php file would be great... any idea wha that would look like?

Gondwana replied on Nov 10, 2017 at 1:45 am Permalink Reply

Im afraid i gotta work now. Will look at it tomorrow.

mnakalay replied on Nov 10, 2017 at 1:46 am Permalink Reply

Why don't you just generate a unique string or number in the view using uniqid() (or random_int() if you're on PHP 7 and want better results)?

You can then use that to differentiate between instances of the block.

Chrouglas replied on Nov 10, 2017 at 3:10 pm Permalink Reply 1 Attachment

I actually tried time() thinking it would be unique from block to block as each loaded on the page. But nope.

Take a look at the screenshot i've attached. The "Looking to buy wholesale" boxes are a stack and is the same for each product that is available for bulk purchase. As you can see there can be multiple products on a page that are avaialble for bulk. I put it in a stack so that if it ever needs to change, then I can just update it once rather than for each bulk product. But the two instances of the stack on the page are being created identically and the identical classes is messing up the JS that should toggle the block to hide the copy until click on.

This seems like there should be a simple solution but it is not coming to me. Did the idea of adding $bUID as a concrete function ever get added in? I read about the possibility of that in a few places.

mnakalay replied on Nov 10, 2017 at 3:30 pm Permalink Reply

I have to apologize, I totally missed the fact that you were using it in a stack.

Could you post your JS code to see if there isn't a way to deal with the situation from there?

Chrouglas replied on Nov 10, 2017 at 3:35 pm Permalink Reply

As long as there's no judgements on my coding skills :) I included the entire block code for good measure. Thanks for taking a look.

<?php
   defined('C5_EXECUTE') or die("Access Denied.");
   $c = Page::getCurrentPage();
   $unID = $bID . '_' . time() . '_' . uniqid();
?>
<div class="buy-bulk-content-wrapper">
    <div class="buy-bulk-header buy-bulk-header_<?php echo $unID; ?>">
       <img src="<?php echo $this->getThemePath()?>/img/BuyBulkButtonPackage.png" />
       <h3>LOOKING TO<br />BUY WHOLESALE?</h3>
        <div class="icons-wrapper">
            <div class="icons">
                <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
            </div>
            <i class="fa fa-minus-circle" aria-hidden="true"></i>

Viewing 15 lines of 63 lines. View entire code block.

 
<?php
   defined('C5_EXECUTE') or die("Access Denied.");
   $c = Page::getCurrentPage();
 
   $unID = $bID . '_' . time() . '_' . uniqid();
?>
 
<div class="buy-bulk-content-wrapper">
    <div class="buy-bulk-header buy-bulk-header_<?php echo $unID; ?>">
       <img src="<?php echo $this->getThemePath()?>/img/BuyBulkButtonPackage.png" />
       <h3>LOOKING TO<br />BUY WHOLESALE?</h3>
        <div class="icons-wrapper">
            <div class="icons">
                <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
            </div>
            <i class="fa fa-minus-circle" aria-hidden="true"></i>
        </div>
    </div>
   <div class="buy-bulk-content buy-bulk-content_<?php echo $unID; ?>">
<?php   
   if (!$content && is_object($c) && $c->isEditMode()) { ?>
        <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Content Block.')?></div> 
    <?php } else {
        print $content;
    }
?>
   </div>
</div>
 
<?php if (!$c->isEditMode()) { ?>
<script>
$(document).ready(function(e) {
 
    expandBulk_<?php echo $unID; ?>();
 
   $('.buy-bulk-header_<?php echo $unID; ?>').hover(function(){ 
      if ( $('.buy-bulk-content_<?php echo $unID; ?>').hasClass('closed') ){
         hoverBulk_<?php echo $unID; ?>(); 
      }
   });
 
   $('.buy-bulk-header_<?php echo $unID; ?>').click(function(){ expandBulk_<?php echo $unID; ?>(); });
   //$('.product-features-more i').mouseenter(function(){ expandFeatures(); });
});
function expandBulk_<?php echo $unID; ?>() {
   $('.buy-bulk-content_<?php echo $unID; ?>>').slideToggle();
   if ( !$('.buy-bulk-content_<?php echo $unID; ?>').hasClass('closed') ){
      $('.buy-bulk-content_<?php echo $unID; ?>').addClass('closed');
      $('.buy-bulk-header_<?php echo $unID; ?> .icons').show();
 
      //$('.buy-bulk-header .fa-arrow-circle-down').show();
      $('.buy-bulk-header_<?php echo $unID; ?> .fa-minus-circle').hide();
   } else {
      $('.buy-bulk-content_<?php echo $unID; ?>').removeClass('closed');
      $('.buy-bulk-header_<?php echo $unID; ?> .icons').hide();
      //$('.buy-bulk-header .fa-plus-circle').hide();
      $('.buy-bulk-header_<?php echo $unID; ?> .fa-minus-circle').show();
   }
   //$('.product-features-less').toggle();
}
function hoverBulk_<?php echo $unID; ?>() {
   $('.buy-bulk-header_<?php echo $unID; ?> .fa-arrow-circle-down').toggle();
   $('.buy-bulk-header_<?php echo $unID; ?> .fa-plus-circle').toggle();
}
</script>
 
<style>
.icons-wrapper .fa-plus-circle, .icons-wrapper .fa-minus-circle { display:none; }
</style>
<?php } ?>

this is, as I said, in /application/blocks/content/templates/buy-bulk if that matters.

mnakalay replied on Nov 10, 2017 at 4:03 pm Permalink Best Answer Reply

I didn't test it but this should do the trick. If you get any error message tell me what it is I'll fix it.

<?php
   defined('C5_EXECUTE') or die("Access Denied.");
   $c = Page::getCurrentPage();
?>
<div class="buy-bulk-content-wrapper">
    <div class="buy-bulk-header">
       <img src="<?php echo $this->getThemePath()?>/img/BuyBulkButtonPackage.png" />
       <h3>LOOKING TO<br />BUY WHOLESALE?</h3>
        <div class="icons-wrapper">
            <div class="icons">
                <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
            </div>
            <i class="fa fa-minus-circle" aria-hidden="true"></i>
        </div>

Viewing 15 lines of 63 lines. View entire code block.

 
<?php
   defined('C5_EXECUTE') or die("Access Denied.");
   $c = Page::getCurrentPage();
 
?>
 
<div class="buy-bulk-content-wrapper">
    <div class="buy-bulk-header">
       <img src="<?php echo $this->getThemePath()?>/img/BuyBulkButtonPackage.png" />
       <h3>LOOKING TO<br />BUY WHOLESALE?</h3>
        <div class="icons-wrapper">
            <div class="icons">
                <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
            </div>
            <i class="fa fa-minus-circle" aria-hidden="true"></i>
        </div>
    </div>
   <div class="buy-bulk-content">
<?php   
   if (!$content && is_object($c) && $c->isEditMode()) { ?>
        <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Content Block.')?></div> 
    <?php } else {
        print $content;
    }
?>
   </div>
</div>
 
<?php if (!$c->isEditMode()) { ?>
<script>
$(document).ready(function(e) {
 
    expandBulk($('.buy-bulk-header'));
 
   $('.buy-bulk-header').hover(function(){ 
      if ( $(this).next('.buy-bulk-content').hasClass('closed') ){
         hoverBulk($(this)); 
      }
   });
 
   $('.buy-bulk-header').click(function(){ expandBulk($(this)); });
});
 
function expandBulk(headers) {
  var header, content;
  headers.each(function(){
    header = $(this);
    content = header.next('.buy-bulk-content');
      content.slideToggle();
      if ( !content.hasClass('closed') ){
        content.addClass('closed');
        header.find('.icons').show();
        header.find('.fa-minus-circle').hide();
      } else {
        content.removeClass('closed');
        header.find('.icons').hide();
        header.find('.fa-minus-circle').show();
      }
  });
 
}
 
function hoverBulk(el) {
   el.find('.fa-arrow-circle-down').toggle();
   el.find('.fa-plus-circle').toggle();
}
</script>
 
<style>
.icons-wrapper .fa-plus-circle, .icons-wrapper .fa-minus-circle { display:none; }
</style>
<?php } ?>

mnakalay replied on Nov 10, 2017 at 4:05 pm Permalink Reply

as an FYI the idea is you don't need unique IDs to differentiate between elements in javascript. They already have unique IDs as defined by their position in the page. So when you select an element among many, jquery knows which one it is, first one, second one... So if I click on a header jquery knows which header it is and if I ask for the content next to that header, jquery is not confused because it understands the context.

Chrouglas replied on Nov 10, 2017 at 4:07 pm Permalink Reply

Right on man! Thank you. Let me test and see how it goes.

Chrouglas replied on Nov 10, 2017 at 4:27 pm Permalink Reply

Thanks for your help on this.
They seem to be operating independently but the function is firing the amount of times the block appears. Both on loading the page and when you click.

$('.buy-bulk-header').click(function(){ expandBulk($(this)); console.log('yo'); });

You can see an instance of it here... (down under "Product Details" toward the bottom)
http://www.adamsmfg.com/index.php?cID=430...

mnakalay replied on Nov 10, 2017 at 4:44 pm Permalink Reply

right sorry, one thing needs to change. Take the whole JS code and put it in a file view.js and put that file next to your template's view.php

the way I did it, the js is loaded 3 times. In an external file, it will only be loaded once. It should fix the problem

Chrouglas replied on Nov 10, 2017 at 5:15 pm Permalink Reply

Cool. Thank you soooooo much. I will start tinkering with the JS $.next thing... it seems to be a really valuable asset that I haven't ever explored.

Thanks again.
Chris

mnakalay replied on Nov 10, 2017 at 6:03 pm Permalink Reply

jQuery has really well written doc. .next() is just one of the possibilities. you also have .siblings() .parent() .parents() and plenty of others.

Gondwana replied on Nov 10, 2017 at 8:26 pm Permalink Reply

I'll assume that I'm off the hook. :)

mnakalay replied on Nov 10, 2017 at 11:07 pm Permalink Reply

I just looked at the website and by the look of it, I'd say you are ;)

Gondwana replied on Nov 10, 2017 at 11:13 pm Permalink Reply

It's for the best.

Chrouglas replied on Nov 11, 2017 at 12:18 am Permalink Reply

Yup it is working like a charm. Thank you both!

But just out of curiosity... can you use a controller.php file within a custom block template?

Gondwana replied on Nov 11, 2017 at 12:27 am Permalink Reply

Haven't tried it, but I think that, in any view.php, $controller should get you the controller object. You only get one controller per block type, and not one per view (of which there may be many for a single block type). Ergo, if you need custom code in the controller, you may need to create a whole new block type (based on the original).

Forums

Developing (v7+)

Controller Override for Custom View to Generate a Unique ID

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?